<template>
    <div id="layout_sider_right" class="layout_sider_right" :style="style">
        <div v-show="store.ViewStatus !== 'Statistics'" class="search_input">
            <div class="searchicon" @click="tosearch"></div>
            <el-input v-model="search" placeholder="搜索" @keyup.enter="tosearch" />
        </div>
        <keep-alive>
            <component :is="views"></component>
        </keep-alive>
        <div v-show="store.ViewStatus !== 'Statistics'" class="layout_sider_right_adsorption">
            <div @click="warnHis">
                <el-tooltip content="预警记录" placement="left">
                    <img src="@/assets/image/rightearlywarning.png" alt="" />
                </el-tooltip>
            </div>
            <div>
                <img
                    src="@/assets/image/rightexpand.png"
                    alt=""
                    @click="ViewStatus === 'FireControl' ? store.UpDateHideViews() : store.UpDateToggleView()"
                />
            </div>
            <div><img src="@/assets/image/currentlocation.png" alt="" /></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { watch, ref, markRaw } from 'vue';
import type { Component } from 'vue';
import { storeToRefs } from 'pinia';
import SIDERRIGHT from '@/components/common/PageScreen/index';
import { CheckSiderView } from '@/store/index';
import renderPopconfirmComponent from '@/components/common/Popconfirm';
import warnHistory from '@/components/common/warnHistory/index.vue';

const search = ref('');
const {
    OverviewSiderRight,
    SecurityCheckSiderRight,
    GreenInitiativeSiderRight,
    GreenWaterQualitySiderRight,
    SecuritySiderRight,
    EnergySiderRight,
    StatisticsSiderRight,
    EmergencySiderRight,
    EmergencyTabSiderRight
} = SIDERRIGHT;
const style = ref();
const store = CheckSiderView();
const { ViewStatus, ShowStatus } = storeToRefs(store);

const tosearch = () => {
    console.log(111111);
};
const stateObj: ViewSider.HitViewStatus = {
    OverView: markRaw(OverviewSiderRight),
    SecurityCheck: markRaw(SecurityCheckSiderRight),
    GreenInitiative: markRaw(GreenInitiativeSiderRight),
    GreenInitiativeWaterQuality: markRaw(GreenWaterQualitySiderRight),
    Security: markRaw(SecuritySiderRight),
    Energy: markRaw(EnergySiderRight),
    Emergency: markRaw(EmergencySiderRight),
    EmergencyTab: markRaw(EmergencyTabSiderRight),
    Statistics: markRaw(StatisticsSiderRight)
};
const views = ref<Component>(OverviewSiderRight);
const warnHis = () => {
    renderPopconfirmComponent({ title: '预警历史记录', showPop: true, w: '48%' }, warnHistory);
};
/** 监听视图更新 */
watch(
    ViewStatus,
    (val: string) => {
        if (stateObj[val as ViewSider.PickState]) {
            views.value = stateObj[val as ViewSider.PickState];
        }
    },
    { immediate: true }
);
/** 监听视图显示隐藏 */
watch(
    ShowStatus,
    val => {
        const box = document.getElementById('layout_sider_right') as HTMLElement;
        const boxwidth = (box?.offsetWidth as number) + 16;
        style.value = `transform:translateX(${val ? '0' : `${boxwidth}px`})`;
    },
    { immediate: true }
);
</script>
<style scoped lang="scss">
.layout_sider_right {
    position: absolute;
    top: 58px;
    right: 16px;
    width: 19%;
    height: 90.3%;
    z-index: 2;
    transition-duration: 300ms;
    transition-timing-function: ease-out;
    transform: translateX(0);
    transition-property: all;
    .layout_sider_right_adsorption {
        position: absolute;
        width: 38px;
        bottom: 0;
        left: -48px;
        display: flex;
        flex-wrap: wrap;
        cursor: pointer;
        div {
            width: 100%;
            height: 38px;
            margin-bottom: 10px;
            img {
                width: 100%;
                height: 100%;
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    .search_input {
        position: absolute;
        top: 55px;
        left: -290px;
        width: 278px;

        ::v-deep(.el-input) {
            font-size: 12px;
            --el-input-border-color: rgba(0, 102, 255, 1);
            --el-input-text-color: #dfeef3;
        }

        ::v-deep(.el-input__wrapper) {
            background-color: rgba(3, 33, 58, 0.58);
        }
        .searchicon {
            position: absolute;
            width: 15px;
            height: 15px;
            top: 8px;
            right: 8px;
            background: url(@/assets/image/searcgicon.png) no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
            z-index: 2;
        }
    }
}
</style>
